<template>
	<view class="content font_family">
		<view class="box">
			<view class="star f_j" v-for="(item,index) in query_data.pf_info" :key="index">
				<view class="title">
					{{item.name}}
				</view>
				<u-rate :count="5" allowHalf size="45rpx" v-model="item.score"></u-rate>
			</view>
			<!-- <view class="star f_j">
				<view class="title">
					商品评价
				</view>
				<u-rate :count="5" size="45rpx" v-model="value"></u-rate>
			</view> -->
			<view class="tip f_j">
				<image src="../../static/public/set.png" mode=""></image>
				<text>写出你的真实感受，可以帮助更多小伙伴哦~</text>
			</view>
			<u--textarea v-model="query_data.content" height='300rpx' placeholder="请输入内容" border='none'></u--textarea>
			<view class="add_box f f_w">
				<view class="img_box" v-for="(item,index) in query_data.images" :key="index">
					<image class="img" :src="item" mode="aspectFill">
					</image>
					<view class="delete_btn" @click="delete_img(index)">
						<u-icon name="close-circle-fill" color="#FF3434" size="32rpx"></u-icon>
					</view>
				</view>
				<view class="add_btn f_d f_zj" @click="add_img" v-if="query_data.images.length<9">
					<image class="btn" src="../../static/order/add_img.png" mode=""></image>
					<view class="">
						添加图片
					</view>
				</view>
			</view>
			<view class="add_box f f_w">
				<view class="img_box" v-if="query_data.attachfile">
					<video class="img" :src="query_data.attachfile" object-fit="fill"></video>
					<view class="delete_btn" @click="delete_video">
						<u-icon name="close-circle-fill" color="#FF3434" size="32rpx"></u-icon>
					</view>
				</view>
				<view class="add_btn f_d f_zj" @click="add_video" v-else>
					<image class="btn" src="../../static/order/add_img.png" mode=""></image>
					<view class="">
						添加视频
					</view>
				</view>
			</view>
		</view>
		<view class="sub_btn">
			<view class="btn" @click="sub">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import { getCommentTag } from '@/api/page.js'
	import { comment } from '@/api/user.js'
	export default {
		data() {
			return {
				video: '',
				query_data: {
					order_detail_id: '',
					pf_info: '',
					content: '',
					images: [],
					attachfile: ''
				}
			}
		},
		onLoad(e) {
			this.query_data.order_detail_id = e.id
			this.get_tag()
		},
		methods: {
			// 获取评论标签
			get_tag() {
				getCommentTag().then(res => {
					if (res.code == 1) {
						let obj = []
						res.data[0].xx_json.forEach(item => {
							obj.push({
								name: item,
								score: 0,
							})
						})
						this.query_data.pf_info = obj
					}
				})
			},
			add_img() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						if (res.errMsg == 'chooseImage:ok') {
							this.upload_img(res.tempFilePaths[0]).then(res => {
								if (res.code == 1) {
									this.query_data.images.push(res.data.fullurl)
								}
							})
						}
					}
				})
			},
			delete_img(index) {
				this.query_data.images.splice(index, 1)
			},
			add_video() {
				uni.chooseVideo({
					count: 1,
					success: (res) => {
						console.log(res.tempFilePath)
						this.upload_img(res.tempFilePath).then(res => {
							if (res.code == 1) {
								this.query_data.attachfile = res.data.fullurl
							}
						})
					}
				})
			},
			delete_video() {
				this.query_data.attachfile = ''
			},
			sub() {
				if (!this.query_data.content) {
					uni.showToast({
						icon: 'none',
						title: '请写下你的真实感受吧',
					})
					return
				}
				let data = uni.$u.deepClone(this.query_data)
				let arr = []
				data.images.forEach(item => {
					arr.push(this.removeDomainFromUrl(item))
				})
				data.images = arr
				data.attachfile = this.removeDomainFromUrl(data.attachfile)
				// console.log(data)
				comment(data).then(res => {
					if (res.code == 1) {
						this.back()
					}
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.box {
			padding: 30rpx;
			padding-bottom: 10rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 16rpx 16rpx;

			.star {
				margin-bottom: 30rpx;

				.title {
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					margin-right: 34rpx;
				}
			}

			.tip {
				margin-bottom: 30rpx;
				ont-weight: 400;
				font-size: 24rpx;
				color: #999999;

				image {
					margin-right: 20rpx;
					width: 30rpx;
					height: 30rpx;
				}

			}

			::v-deep .u-textarea {
				padding: 0rpx;
			}

			.add_box {
				.img {
					width: 184rpx;
					height: 178rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;

				}

				.add_btn {
					margin-bottom: 20rpx;
					width: 184rpx;
					height: 178rpx;
					background: #F7F7F7;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;

					.btn {
						width: 42rpx;
						height: 42rpx;
						margin-bottom: 20rpx;
					}
				}

				.img_box {
					margin-bottom: 20rpx;
					margin-right: 20rpx;
					position: relative;

					.delete_btn {
						position: absolute;
						right: 10rpx;
						top: 10rpx;
					}
				}
			}
		}

		.sub_btn {
			margin-top: 30rpx;
			padding: 30rpx;

			.btn {
				text-align: center;
				padding: 32rpx 0rpx;
				background: #FF3434;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>